@media(min-width:480px)
{    
    body{  background: #f6f7f8;}
    .body-wrap{ width: 540px;  margin: 0 auto;  background: white;}    
    .join-body{ width: 440px;padding: 0;}
}
.body-wrap{ min-height: 100%;}
 




.instruction-tit{  font-size: 22px; text-align: center;  font-weight: normal; margin: 0px 15px 10px 15px; padding: 40px 0px  25px 0px; border-bottom: 1px solid #E1E1E1;
}
.instruction-wrap{ padding: 15px 20px;
    p{ text-justify:inter-ideograph; text-align: justify; color: #333; font-size: 16px; line-height: 1.8; padding-top: 15px; text-indent: 32px;}
    i{  font-weight: bold;   text-indent: 0; background: orange; color: white; display: inline-block;line-height: 25px; padding: 0px 10px; margin-right: 10px; border-radius: 5px;  height: 25px; line-height: 25px; text-align: center;} 
    img{ margin: 10px auto ; max-width: 88%;  display: block;}    
    .tip{
         background: #E1E1E1; padding: 15px; border-radius: 5px;
    }
}


.join-body{
     background: url(../images/join/bg.jpg) #000409; background-size: 100% auto;    font-size: 16px;  color: white;
     p{text-justify:inter-ideograph; color: white; font-size: 16px; }
}
.join-top-bg{ background: no-repeat  top  url(../images/join/top.jpg); background-size: 100% auto; }
.join-bottom-bg{  min-height: 1000px; background: no-repeat  bottom  url(../images/join/bttom.jpg); background-size: 100% auto; }
.join-cover{
    padding-top: 320px; text-align: center;
    .first{ color: #07e3ee; padding-bottom: 40px;
         font-size: 18px;
         .lg1{ font-size: 25px; font-weight: bold;}
         .lg2{ font-size: 29px; font-weight: bold;}
    }
    .second{
         text-align: center; font-size: 16px;
        span{ background: #2ac862; padding: 4px 15px; border-radius: 90px; margin-bottom: 7px; color: white; display: inline-block;}
        i{ font-size: 21px; font-weight: bold;}
    
    }
}


.join-content{
    padding: 170px 15px 20px 15px;
    .intro{ text-indent: 30px; line-height:2;}
    .phone{ text-align: center; padding: 20px 0;
        img{ width: 80%; margin: 0 auto; display: block; }
    }
    .rule{
        padding-bottom: 20px;
        strong{ font-size: 18px;margin: 25px 0; display: inline-block;background: #04e2f4; background: -webkit-linear-gradient(left, #04e2f4, #22fba8); color: #000136;   line-height: 30px; height: 30px; padding: 0px 20px; border-radius: 90px;}
        li{   padding-left: 20px; line-height: 25px; margin-bottom: 5px;}
        i{ height: 25px; width: 25px; margin-right: 10px; border-radius: 50px; display: inline-block; background: #04e2f4; background: -webkit-linear-gradient(left, #04e2f4, #22fba8);  text-align: center; line-height: 25px;color: #000136;}
    }
    .tel{        
       margin-bottom: 15px; display: block;  background: #346fca;   text-align: center; height: 44px; text-align: center; border-radius: 90px; line-height:44px;color: white;
       i{ color: white; margin-right: 5px; background: none; font-size: 20px;}
    }
    .tel:active{ background: #437cd5;}    
}
@media(max-width:375px)
{
    .join-cover {    padding-top: 300px;}
    .join-content {    padding: 100px 15px 20px 15px;}
}
@media(max-width:320px)
{
    .join-cover {    padding-top: 254px;}
    .join-content {    padding: 50px 15px 20px 15px;}
}


.buy-top{
    img{ display: block; width: 100%;}
}
.buy-content{
    padding: 25px; font-size: 16px;
    dt span{ font-size: 14px; background: #5ec14b; color: white;  border-radius: 90px; padding: 5px 15px; color: white;}
    dd{ padding: 5px 0; line-height: 2;}
    .orange{ font-size: 25px; font-weight: bold;}
    dl{ margin-bottom: 10px; padding-top: 15px;}  
}
.contact-top{
     img{ display: block; width: 100%;}
}
.contact-list{
     background: white;font-size: 16px;
     dt{ font-weight: bold; font-size: 18px;}
     li,dt{ position:  relative; padding: 15px 15px; }
     
    dt:after{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
     }
     dt:after{ left: 0;}
     
     .mui-table-view-cell>a:not(.mui-btn){margin: -15px -15px; padding-left: 52px;}
     dd li a{ padding-left: 85px;}
}
